<template>
  <z-paging-swiper class="page-swiper">
    <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
    <template #top>
      <!-- 搜索框 -->
      <custom-input
        v-model.lazy="searchStr"
        prefix="tmicon-search"
        prefixColor="grey-1"
        focusColor="#1f2329"
        showClear
        :round="25"
        placeholder="快速找人"
      ></custom-input>
      <tm-tabs
        :list="tabsTitle"
        align="center"
        :width="750"
        :itemWidth="300"
        :height="300"
        :default-name="selectKey"
        :round="0"
        itemModel="line"
        v-model:active-name="selectKey"
        @change="headChange"
      ></tm-tabs>
    </template>
    <swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
      <swiper-item class="swiper-item" v-for="item in tabsTitle" :key="item.key">
        <custom-swiper-item
          :tabIndex="item.key"
          :currentIndex="selectKey"
          :requestConfig="staffConfig"
        >
          <template v-slot:default="{ dataList }">
            <view
              v-for="item in dataList"
              :key="item.id"
              style="margin: 20rpx; background-color: pink"
            >
              {{ item.content }}
            </view>
          </template>
        </custom-swiper-item>
      </swiper-item>
    </swiper>
  </z-paging-swiper>
</template>

<script setup lang="ts">
import { ref } from "vue";
const searchStr = ref("");
const current = ref(0);
const selectKey = ref("0");
const tabsTitle = [
  { key: "0", title: "业控" },
  { key: "1", title: "客户" },
  { key: "3", title: "经营" }
];

const staffConfig = {
  requstUrl: "getArticleCates",
  params: {}
};
function swiperAnimationfinish(e: any) {
  current.value = e.detail.current;
  selectKey.value = e.detail.current + "";
}

function headChange() {
  current.value = +selectKey.value;
}
</script>

<style lang="scss" scoped>
.swiper {
  height: 100%;
}
</style>
